
<!DOCTYPE html>
<html>
<head>
  <title>注册</title>
   <#include "../common/link.ftl">
</head>
<body>

<#include "../common/header.ftl">

<div class="layui-container fly-marginTop">
  <div class="fly-panel fly-panel-user" pad20>
    <div class="layui-tab layui-tab-brief" lay-filter="user">
      <ul class="layui-tab-title">
        <li><a href="${ctx.contextPath}/user/login">登入</a></li>
        <li class="layui-this">注册</li>
      </ul>
      <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
        <div class="layui-tab-item layui-show">
          <div class="layui-form layui-form-pane">
            <#--<form method="post">-->
              <div class="layui-form-item">
                <label for="email" class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                  <input type="text" id="email" name="email" required lay-verify="email" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">确保填写正确的邮箱，找回密码时需要通过邮箱接收</div>
              </div>
              <div class="layui-form-item">
                <label for="username" class="layui-form-label">昵称</label>
                <div class="layui-input-inline">
                  <input type="text" id="username" name="username" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="radio" name="gender" value="男" checked title="男">
                        <input type="radio" name="gender" value="女" title="女">
                    </div>
                </div>
              </div>
              <div class="layui-form-item">
                <label for="pass" class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                  <input type="password" id="pass" name="pass" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">6到16个字符</div>
              </div>
              <div class="layui-form-item">
                <label for="repass" class="layui-form-label">确认密码</label>
                <div class="layui-input-inline">
                  <input type="password" id="repass" name="repass" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label for="authcode" class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                  <input type="text" id="authcode" name="authcode" required lay-verify="required" placeholder="请回答后面的问题" autocomplete="off" class="layui-input">
                </div>
                <div>
                    <img class="pointer" id="code_img" src="${ctx.contextPath}/authcode/calculate" alt="点击刷新"/>
                </div>
              </div>
              <div class="layui-form-item">
                <button class="layui-btn" id="reg_btn">立即注册</button>
              </div>
            <#--</form>-->
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<#include "../common/footer.ftl">

<script>
layui.cache.page = 'user';
layui.cache.user = {
  username: '游客'
  ,uid: -1
  ,avatar: '${ctx.contextPath}/static/images/avatar/00.jpg'
  ,experience: 83
  ,sex: '男'
};
layui.config({
  version: "3.0.0"
  ,base: '${ctx.contextPath}/static/mods/'
}).extend({
  fly: 'index'
}).use(['fly','form'],function () {
    var $ = layui.$;

    //刷新验证码
    $("#code_img").on("click", function () {
        $(this).attr("src" ,  "${ctx.contextPath}/authcode/calculate?t=" + $.now());
    });

    //异步验证邮箱是否被注册
    $("#email").blur(function () {
        if (!mq.verify_email($(this))) {
            return false;
        }
        var ctx = "${ctx.contextPath}";//项目根路径
        mq.async(ctx+"/user/authEmail", {email:$(this).val()}, ctx);
    });

    //表单提交
    $("#reg_btn").on("click", function () {
        var email_dom=$("#email"),username_dom=$("#username"),pass_dom=$("#pass"),repass=$("#repass").val()
                ,authcode_dom=$("#authcode"), gender=$("input[name='gender']:checked").val();
        // 表单校验
        if (!mq.verify_email(email_dom) || !mq.verify_val(username_dom) || !mq.verify_pass(pass_dom)
              || !mq.verify_val(authcode_dom)) {
            return false;
        }
        var email=email_dom.val(),username=username_dom.val(),pass=pass_dom.val(),authcode=authcode_dom.val();
        if (pass != repass) {
           mq.error("两次输入的密码不一致");
           return false;
        }
        var ctx = "${ctx.contextPath}";//项目根路径
        //发送异步请求
        var data = {email:email, username: username, password:pass, gender:gender, authcode:authcode};
        mq.async(ctx + "/user/regHandle", data, ctx);
        setTimeout(function () {
            $("#code_img").click();
        }, 50);
    });
});
</script>

</body>
</html>